<nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
  <ng-template #modalTitle>
    修改栏目
  </ng-template>

  <ng-template #modalContent>
    <form nz-form [formGroup]="validateForm" *ngIf="active">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="name" nzRequired>
          <span>
            栏目名称
            <i nz-icon nz-tooltip nzTitle="请输入栏目名称" type="question-circle" theme="outline"></i>
          </span>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input id="name" formControlName="name" [(ngModel)]="channel.name">
          <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请输入栏目名称!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="channelId" nzRequired>
          <span>
            栏目组
            <i nz-icon nz-tooltip nzTitle="请选择栏目组" type="question-circle" theme="outline"></i>
          </span>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-select  formControlName="channelGroupId"  [(ngModel)]="channel.channelGroupId" nzAllowClear nzPlaceHolder="请选择栏目组">
            <nz-option *ngFor="let option of optionList" [nzValue]="option.value" [nzLabel]="option.label"></nz-option>
          </nz-select>
          <nz-form-explain *ngIf="validateForm.get('channelGroupId').dirty && validateForm.get('channelGroupId').errors">请选择栏目组!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="content" >
          <span>
            栏目内容
            <i nz-icon nz-tooltip nzTitle="请输入栏目内容" type="question-circle" theme="outline"></i>
          </span>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <textarea formControlName="content"  [(ngModel)]="channel.content" nz-input rows="2" placeholder="请输入栏目内容"></textarea>
          <nz-form-explain *ngIf="validateForm.get('content').dirty && validateForm.get('content').errors">请输入栏目内容!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="keywords" >
          <span>
            关键字
            <i nz-icon nz-tooltip nzTitle="请输入关键字" type="question-circle" theme="outline"></i>
          </span>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <textarea formControlName="keywords" [(ngModel)]="channel.keywords"  nz-input rows="2" placeholder="请输入关键字"></textarea>
          <!--<nz-form-explain *ngIf="validateForm.get('keywords').dirty && validateForm.get('keywords').errors">请输入关键字!</nz-form-explain>-->
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="description" >
          <span>
            栏目描述
            <i nz-icon nz-tooltip nzTitle="请输入栏目描述" type="question-circle" theme="outline"></i>
          </span>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <textarea formControlName="description" [(ngModel)]="channel.description" nz-input rows="2" placeholder="请输入栏目描述"></textarea>
          <nz-form-explain *ngIf="validateForm.get('description').dirty && validateForm.get('description').errors">请输入栏目描述!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="isShowMenu" nzRequired>菜单是否显示</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.controls['isShowMenu']">
          <nz-radio-group formControlName="isShowMenu" [(ngModel)]="channel.isShowMenu">
            <label nz-radio-button [nzValue]="true" >是</label>
            <label nz-radio-button [nzValue]="false">否</label>
          </nz-radio-group>
          <nz-form-explain *ngIf="validateForm.get('isShowMenu').dirty && validateForm.get('isShowMenu').errors">请选择栏目导航栏是否显示!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="orderNo" nzRequired>
          <span>
            排序
            <i nz-icon nz-tooltip nzTitle="请输入排序" type="question-circle" theme="outline"></i>
          </span>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-input-number  id="orderNo" formControlName="orderNo" [nzMin]="1" [(ngModel)]="channel.orderNo" [nzStep]="1" [nzDisabled]="isDisabled"></nz-input-number>
          <nz-form-explain *ngIf="validateForm.get('orderNo').dirty && validateForm.get('orderNo').errors">请输入排序!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

    </form>
  </ng-template>
  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="handleCancel()">取消</button>
    <button nz-button type="submit" [nzType]="'primary'" (click)="handleSave()" [nzLoading]="isConfirmLoading">保存</button>
  </ng-template>
</nz-modal>
